<template>
  <div style="padding: 10px" class="data-import-area">
    <customSpace fullWidth >
      <template #content>
        <customButton size="medium" @click="downLoad"  title="下载模板" theme="primary"/>
        <customUpload
          :data="cpData"
          :max="1"
          onlyButton
          :action="importPath"
          @success="success"
          @error="error"
          class="custom-upload"
          successMsg="数据导入结束"
          ref="customUpload"
          v-if="isRenderUpload"
          hideFileList
        />
      </template>
    </customSpace>
    <div>
      <div   class="box-title">操作结果</div>
      <div class="box-result" :style="{color: isSuccess ? '#009966' : '#CC3333', padding: '5px 10px'}">
        <div v-html="respMsg"></div>
      </div>
    </div>
    <div>
      <div   class="box-title">操作说明</div>
      <div v-html="helpMsg" style="font-size: 11px; padding: 5px 10px">
      </div>
    </div>
  </div>
</template>

<script>
import customUpload from '@/components/custom/form/customUpload.vue'
export default {
  help: '系统数据导入-导入区域',
  data() {
    return {
      isRenderUpload: true,
      baseApi: location.origin + '/api',
      respMsg: '暂无',
      isSuccess: false,
    }
  },
  methods: {
    // 清空
    clear(){
      this.respMsg = '暂无'
      this.isSuccess = false
      this.isRenderUpload = false
      setTimeout(() => {
        this.isRenderUpload = true
      }, 500)
    },
    downLoad(){
      const link = document.createElement('a')
      link.style.display = 'none'
      link.href = this.baseApi + this.downloadPath + `?sheetName=${this.sheetName}&Authorization=` + this.utils.getCurrentUser().token
      document.body.appendChild(link)
      link.click()
    },
    success(data, resp){
      this.respMsg = resp.msg
      this.isSuccess = true
      this.isRenderUpload = false
      setTimeout(() => {
        this.isRenderUpload = true
      }, 500)
      this.$emit('success',data, resp)
    },
    error(resp){
      this.isSuccess = false
      this.respMsg = '暂无'
      if (resp && resp.msg) {
        this.respMsg = resp.msg
      }
      this.isRenderUpload = false
      setTimeout(() => {
        this.isRenderUpload = true
      }, 500)
    }
  },
  created() {
  },
  props: {
    /**
     * @Description：模板下载路径
     */
    downloadPath: {
      type: String,
      default: () =>  ''
    },
    /**
     * @Description：数据导入路径
     */
    importPath: {
      type: String,
      default: () =>  ''
    },
    /**
     * @Description：工作表名称
     */
    sheetName: {
      type: String,
      default: () =>  '工作表'
    },
    /**
     * @Description：帮助信息
     */
    helpMsg: {
      type: String,
      default: () =>  '1、【下载模板】完善表格<br>\n 2、【选择文件】导入数据'
    },
    /**
     * @Description 额外参数
     */
    propData: {
      type: Object,
      default: () =>  {}
    }
  },
  components: { customUpload },
  computed: {
    cpData() {
      let data = { fileRefId: 'dataImport', fileRefTable: 'dataImport', fileSavePath: 'dataImport'}
      if (this.propData) {
        Object.keys(this.propData).forEach(key => {
          data[key] = this.propData[key]
        })
      }
      return data
    }
  },
}
</script>


<style lang="scss" scoped>
.box-result{
  word-break: break-all;
}
</style>
